<template>
	<div class="trend">
		<div class="text" :style=" {color:textColor}">
			<slot v-if="slots.default" ></slot>
			<div v-else> {{text}}</div>
		</div>
		<div class="icon">
			使用固定的图标
			<!--			
			<el-icon-arrowup :style="{color:!reverseColor? upIconColor:downIconColor}" v-if="type==='up'"></el-icon-arrowup>
			<el-icon-arrowdown :style="{color:!reverseColor?downIconColor:upIconColor}" v-else></el-icon-arrowdown>
			-->
			<!-- 使用自定义的图标 -->
			<component 
			:is="`el-icon${toLine(upIcon)}`"
			:style="{color:!reverseColor? upIconColor:downIconColor}" v-if="type==='up'"
			></component>
			<component
			:is="`el-icon${toLine(downIcon)}`"
			:style="{color:!reverseColor? downIconColor:upIconColor}" v-else
			></component>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { useSlots,onMounted,computed } from 'vue';
	import { toLine } from '../../../utils';
	let slots=useSlots();
	let props=defineProps({
		// 标记当前趋势是上升（up)还是下降(down)
		type:{
			type:String,
			default:'up'
			
		},
		// 趋势显示的文字
		// 1父组件传过来的数据
		// 2/插槽
		text:{
			type:String,
			default:'文字'
		},
		// 颜色反转值在默认的颜色下生效,如果使用自定义颜色无效
		reverseColor:{
			type:Boolean,
			default:false
		},
		// 上升趋势图标
		upIcon:{
			type:String,
			default:'arrowLeft'
		},
		// 下降趋势图标
		downIcon:{
			type:String,
			default:'arrowRight'
		},
		// 上升趋势图标颜色
		upIconColor:{
			type:String,
			default:'#f5222d'
		},
		// 下降趋势图标颜色
		downIconColor:{
			type:String,
			default:'#52c41a'
		},
		// 上升趋势文字颜色
		upTextColor:{
			type:String,
			default:'#1c222d'
		},
		// 下降趋势文字颜色
		downTextColor:{
			type:String,
			default:'#ab1411'
		}
	})
	onMounted(()=>{
		 
	})
	// 计算文本的颜色
	let textColor=computed(()=>{
		return props.type==='up'?props.upTextColor:props.downTextColor;
	})
</script>

<style lang="scss" scoped>
	.trend{
		display: flex;
		align-items: center;
		.text{
			font-size: 12px;
			margin-right: 40x;
		}
		.icon{
			svg{
				width: 0.8em;
				height: 0.8em;
			}
			
		}
	}
</style>